<template>
  <div class="box">
    <div class="detail2-head">
      <i @click="goback" class="iconfont icon-fanhui"></i>
      <h2>确认购买信息</h2>
    </div>
    <div class="detail2-cont">
      <div class="detail2-list">
        <img src="https://tgi1.jia.com/119/624/19624632.jpg" alt="">
        <h1>宝宝秋冬加棉保暖套装</h1>
        <span class="Price">￥199</span>
        <p>数量<span>- 99 +</span></p>
        <div class="chicun">
          <h4>尺寸</h4>
          <p></p>
          <ul>
            <li>30cm</li>
            <li>40cm</li>
            <li>50cm</li>
            <li>60cm</li>
            <li>70cm</li>
          </ul>
        </div>
        <div class="color">
          <h4>颜色</h4>
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="dizhi">
          <h4>配送至</h4>
          <p>广东省深圳市南山区一隅清欢设计工作室</p>
        </div>
      </div>
      <div class="detail2-bottom" @click="btn">
        确认
      </div>
    </div>
  </div>

</template>

<script>
export default {
  methods: {
    goback () {
      this.$router.go(-1)
    },
    btn () {
      this.$router.push('/cart')
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.detail2-head {
  @include rect(100%, 0.42rem);
  background: rgba(235, 235, 235, 0.849);
  line-height: 0.42rem;
  i {
    float: left;
    font-size: 0.16rem;
    width: 0.3rem;
    text-align: center;
    font-weight: 700
  }
  h2 {
    float: left;
    width:80%;
    text-align: center;
    font-size: 0.16rem;
    font-weight: 500;
    color: #444343;
  }
}
.detail2-cont {
  @include rect(100%, 100%);
  .detail2-list {
    @include rect(100%, 89%);
    overflow: auto;
    img {
      @include rect(100%, 3.5rem);
      border-radius: 0.12rem;
      background-color: rgba(255, 255, 255, 1);
      border: 1px solid rgba(223, 215, 215, 1);
    }
    h1 {
      float: left;
      margin-left: 0.22rem;
      width: 2.22rem;
      height: 0.30rem;
      line-height: 0.23rem;
      background-color: rgba(255, 255, 255, 0);
      color: rgba(100, 100, 100, 1);
      font-size: 0.16rem;
      text-align: left;
      font-weight: 500;
      box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
      font-family: Microsoft Yahei;
      border: 1px solid rgba(255, 255, 255, 0);
    }
    .Price {
      display: inline-block;
      width: 0.65rem;
      height: 0.24rem;
      line-height: 0.24rem;
      border-radius: 0.26rem;
      color: rgb(243, 91, 53);
      font-size: 0.16rem;
      text-align: center;
      box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
      font-family: Arial;
      border: 1px solid rgba(255, 255, 255, 0);
      margin-top: 0.05rem;
    }
    p {
      width: 2rem;
      margin: 0.1rem 0.15rem;
      color: #666262;
      span {
        font-size: 0.28rem;
        margin: 0 0.3rem;
      }
    }
    .chicun, .color, .dizhi {
      @include rect(3.45rem, 0.8rem);
      h4 {
        font-weight: 500;
        margin-left: 0.15rem;
      }
      p {
        width: 100%;
        height: 1px;
        border: 1px solid #cccccc;
      }
      ul {
        @include flexbox();
        @include justify-content(space-around);
        margin-left: 0.15rem;
        width: 100%;
      }
    }
    .color {
      ul {
        margin-top: 0.05rem;
        li {
          width: 0.25rem;
          height: 0.25rem;
          background: #71BAF9;
          border-radius: 50%;
        }
        li:nth-of-type(2) {
          background: #FF84AD;
        }
        li:nth-of-type(3) {
          background: #FFB487;
        }
        li:nth-of-type(4) {
          background: rgb(178, 221, 79);
        }
        li:nth-of-type(5) {
          background: rgb(138, 136, 137);
        }
      }
    }
    .dizhi {
      height: auto;
      p {
        border: none;
        height: 0.2rem;
        margin: 0 0.25rem;
      }
    }
  }
  .detail2-bottom {
    position: fixed;
    bottom: 0;
    @include rect(100%, 0.5rem);
    background: #FA633D;
    font-size: 0.22rem;
    color: #ffffff;
    text-align: center;
    line-height: 0.5rem;
  }
}
</style>
